<!--
 * @Descripttion: 
 * @version: @ 1.0.0
 * @Author: ZJZ
 * @Date: 2021-08-13 15:39:04
 * @LastEditors: 朱江洲
 * @LastEditTime: 2022-05-12 16:55:25
-->
<template>
  <div>
    <el-dialog
      title="新建商机"
      :visible.sync="dialog.dialogBusinessShow"
      width="55%"
      @close="closeBus"
      custom-class="dialogClass"
      :close-on-click-modal="false"
      v-loading="loading"
    >
      <el-form
        :model="busForm"
        ref="busForm"
        :rules="busRules"
        label-position="top"
        :inline="false"
        size="normal"
        v-if="dialog.dialogBusinessShow"
      >
        <el-form-item label="商机名称" prop="name">
          <el-input
            v-model="busForm.name"
            placeholder="请输入商机名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="商机客户" prop="customer">
          <el-input
            v-model="busForm.customer"
            placeholder="+ 添加"
            @focus="add"
          ></el-input>
        </el-form-item>
        <el-form-item label="商机金额">
          <el-input
            v-model="busForm.amount"
            placeholder="请输入商机金额"
            oninput="value=value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, '')"
          ></el-input>
        </el-form-item>
        <el-form-item label="预计成交日期">
          <el-date-picker
            v-model="busForm.dealTime"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="商机状态组" prop="opportunityStatusGroupId">
          <el-select
            v-model="busForm.opportunityStatusGroupId"
            placeholder="请选择商机状态组"
          >
            <el-option
              v-for="item in statusOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            v-model="busForm.remark"
            type="textarea"
            :rows="4"
            placeholder="请输入备注"
          ></el-input>
        </el-form-item>
      </el-form>
      <div class="mainCustom">
        <div
          v-for="(item, index) in formList"
          :key="index"
          :class="item.type !== 18 ? 'mainCustomFive' : 'mainCustomOne'"
        >
          <div v-show="item.isHidden">
            <main-content
              :formList="item"
              class="main-con"
              ref="mainContent"
            ></main-content>
          </div>
        </div>
      </div>
      <span slot="footer">
        <el-button @click="dialog.dialogBusinessShow = false">取消</el-button>
        <el-button type="primary" @click="onSubmit" v-if="busForm.id == ''"
          >保存</el-button
        >
        <el-button type="primary" @click="putSubmit" v-else>保存</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="关连客户模块"
      :visible.sync="dialog.relation"
      width="60%"
      custom-class="dialogClass"
      :close-on-click-modal="false"
    >
      <div>
        场景：<el-select
          v-model="scene"
          placeholder="默认"
          clearable
          filterable
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-input
          v-model="name"
          placeholder="请输入客户名称"
          style="width: 188px; margin-left: 5px"
        ></el-input>
        <el-button
          type="primary"
          size="default"
          @click="search"
          style="margin-left: 5px"
          >搜索</el-button
        >
      </div>
      <el-table
        :data="customerData"
        height="3.3rem"
        @row-click="editCurrentApplicationApproval"
        @selection-change="handleSelectionChange"
      >
        <template slot="empty" class="emptyBg">
          <img src="@/assets/images/empty.jpg" alt="" />
        </template>
        <el-table-column type="selection"></el-table-column>
        <el-table-column
          v-for="(item, index) in columnData"
          :key="index"
          :label="item.label"
          :prop="item.prop"
        >
        </el-table-column>
      </el-table>
      <el-pagination
        prev-text="上一页"
        next-text="下一页"
        background
        :page-size="pageSize"
        :page-sizes="[10, 20, 30, 40, 50, 100]"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        layout=" ->,total, prev, pager, next, jumper "
        :total="total"
      >
      </el-pagination>
      <span slot="footer">
        <el-button @click="dialog.relation = false">取消</el-button>
        <el-button type="primary" @click="submit">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getModuleByName, showCustomField } from "@/api/currency.js";
import mainContent from "@/components/mainContent/index.vue";
import {
  addOppo,
  relationCustomerList,
  editOppo,
  opportunityStatusGroup,
} from "@/api/CRM";

export default {
  components: {
    mainContent,
  },
  props: {
    dialog: {
      type: Object,
      required: true,
    },
    busForm: {
      type: Object,
      required: true,
    },
  },
  watch: {
    name(newValue, oldValue) {
      if (newValue == "") {
        this.getCusList();
      }
    },
  },
  data() {
    return {
      formList: [],
      loading: false,
      columnData: [
        {
          label: "客户名称",
          prop: "name",
        },
        {
          label: "手机号码",
          prop: "phone",
        },
        {
          label: "负责人",
          prop: "directorName",
        },
        {
          label: "更新时间",
          prop: "updataTime",
        },
      ],
      multipleSelection: [],
      customerData: [],
      total: 0,
      scene: "", //场景
      name: "", //客户名称
      pageNum: 1,
      pageSize: 10,
      busRules: {
        opportunityStatusGroupId: [
          {
            required: true,
            message: "请选择商机状态组",
          },
        ],
        name: [
          {
            required: true,
            message: "请输入姓名",
            trigger: "blur",
          },
        ],
        customer: [
          {
            required: true,
            message: "请选择客户",
            trigger: "blur",
          },
        ],
      },
      options: [],
      statusOptions: [
        {
          value: "1",
          label: "随机",
        },
      ],
    };
  },
  created() {
    this.getBusList();
    this.getModule();
  },
  methods: {
    // 获取模块Id
    getModule() {
      getModuleByName({
        name: "商机",
      }).then((res) => {
        showCustomField({
          module: res.data,
          id: this.busForm.id || null,
        }).then((res) => {
          console.log(res);
          res.data.map((item) => {
            if (item.type == 3 && item.choiceList == null) {
              item.choiceList = [];
              console.log(item);
            }
          });
          this.formList = res.data;
          console.log(this.formList);
        });
      });
    },
    // 获取商机状态组
    getBusList() {
      opportunityStatusGroup({ status: 1 }).then((res) => {
        this.statusOptions = res.rows;
      });
    },
    // 确定选择
    submit() {
      if (this.multipleSelection.length > 1) {
        this.$message.info("请选择一位客户！");
      } else {
        this.busForm.customer = this.multipleSelection[0].name;
        this.busForm.crmId = this.multipleSelection[0].id;
        this.dialog.relation = false;
      }
    },
    // 表格前多选器
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 更新商机
    putSubmit() {
      this.busForm.customField = JSON.stringify(this.formList);
      this.$refs.busForm.validate((valid) => {
        if (!valid) return this.$message.error("请输入必填项");
        this.loading = true;
        editOppo(this.busForm).then((res) => {
          if (res.code !== 200) return  this.loading = false;
          this.loading = false;
          this.$message.success(res.msg);
          if (this.busForm.crmType !== 6) {
            this.$parent.getList();
          }
          this.dialog.dialogBusinessShow = false;
        });
      });
    },
    // 关闭新建商机
    closeBus() {
      this.dialog.dialogBusinessShowEject = false;
    },
    // 创建新的联系人
    onSubmit() {
      this.busForm.customField = JSON.stringify(this.formList);
      this.$refs.busForm.validate((valid) => {
        if (!valid) return this.$message.error("请输入必填项");
        this.loading = true;
        addOppo(this.busForm).then((res) => {
          if (res.code !== 200)  return  this.loading = false;
          this.loading = false;
          this.$message.success(res.msg);
          console.log(this.busForm.crmType);
          if (this.busForm.crmType !== 6) {
            this.$parent.getList();
          }
          this.dialog.dialogBusinessShow = false;
        });
      });
    },
    // 获取客户列表
    getCusList() {
      relationCustomerList({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        sceneId: this.scene,
        identification: this.name,
      }).then((res) => {
        this.customerData = res.rows;
        this.total = res.total;
      });
    },
    //   选择商机联系人
    editCurrentApplicationApproval(row) {
      this.busForm.customer = row.name;
      this.busForm.crmId = row.id;
      this.dialog.relation = false;
    },
    //   搜索
    search() {
      this.getCusList();
    },
    add() {
      this.dialog.relation = true;
      this.getCusList();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.pageNum = 1;
      this.getCusList();
    },
    //currentPage 改变时会触发
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getCusList();
    },
  },
};
</script>

<style lang="less" scoped>
.el-form {
  display: flex;
  flex-wrap: wrap;
  /deep/ .el-form-item {
    width: 50%;
    .el-input__inner {
      width: 330px;
    }
    .el-textarea__inner {
      width: 330px;
    }
  }
}
.el-pagination {
  margin-top: 24px;
  /deep/ .el-pagination__total {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    margin-right: 25px;
  }
  /deep/ .btn-prev {
    width: 80px;
    height: 40px;
    text-align: center;
  }
  /deep/ .btn-next {
    width: 80px;
    height: 40px;
    text-align: center;
  }
  /deep/ .number {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }
  /deep/ .el-input__inner {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }
  /deep/ .more {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }
  /deep/ .el-pagination__jump {
    .el-input__inner {
      width: 40px;
      height: 40px;
    }
  }
}
/deep/ .el-dialog__body {
  padding-bottom: 10px;
}
.mainCustom {
  display: flex;
  flex-wrap: wrap;
  .mainCustomFive {
    width: 50%;
  }
  .mainCustomOne {
    width: 100%;
  }
}
/deep/.dialogClass {
  .el-dialog__body {
    height: 720px;
    overflow: auto;
  }
}
</style>